<ui:composition template="templateCliente.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<!-- Tiene que tener un head para que tome primefaces -->
	<h:head></h:head>
	
	<ui:define name="itemsCD">
			
		<link href='#{request.contextPath}/css/item.css' rel='stylesheet' type='text/css'></link>	
		
		<div class="row col-xs-6 col-md-3">
		    
		    <p:dataGrid id="dataTable" var="cd" value="#{versionBean.getContenidosFiltrados()}" resizableColumns="true" columns="18" 
		    			emptyMessage="No exiten contenidos con los atributos seleccionados">

				<section>	
					<div class="container-item thumbnail" id="#{cd.nombre}">
						<div class="item" id="#{cd.nombre}">
	
							<p:graphicImage id="NombreId" value="/Imagenes/Logos/#{cd.nombre}" style="width:160px; height:auto; vertical-align:middle;" >
								<f:param name="id" value="#{cd.nombre}" />
							</p:graphicImage>
	
							<div class="item-overlay">
								<!-- <a href="#" class="item-button play"><i class="play"></i></a> -->
								<a href="#" class="item-button share share-btn"><span></span></a>
								<div class="sale-tag"><span>NEW</span></div>
							</div>
							
							<div class="item-content">
								<div class="item-top-content">
									<div class="item-top-content-inner">
										<div class="item-product">
											<div class="item-top-title">
												<h2 style="margin-top:2px; margin-bottom:2px;">
													<h:outputText value="#{cd.nombre}"/>
												</h2>															
												<h:outputText value="#{cd.descripcion}" styleClass="subdescription"/>															
											</div>
										</div>
										<div class="item-product-price">
											<span class="price-num">$ #{versionBean.getPrecioVersion(cd.idContenido)}</span>
											<!-- <p class="subdescription">$36</p> -->
											<!-- <div class="old-price"></div> -->
										</div>
									</div>	
								</div>
								
								<div class="item-add-content">
									<div class="item-add-content-inner">
										<div class="section">
										
											<p:outputPanel rendered="#{loginBean.logueado}">
												<div id="gratis">
												
													<p:dialog modal="false" widgetVar="statusDialog" header="Status" draggable="false" closable="false" resizable="false">
													    <p:graphicImage value="#{request.contextPath}/images/loading9.gif" />
													</p:dialog>
												  
													<h:form id="form" style="display: block;">  

														<p:commandButton
															id="downloadLink" 
															rendered="#{versionBean.getPrecioVersion(cd.idContenido) == 0.0}" 
															ajax="false" onclick="PrimeFaces.monitorDownload(start, stop)"
															styleClass="btn buy expand glyphicon glyphicon-cloud-download" style="padding: 0 57px 0 57px; margin:auto;"
															actionListener="#{ventaBean.buscarArchivo(cd.idContenido,versionBean.getPrecioVersion(cd.idContenido))}" >
															
														    <p:fileDownload value="#{ventaBean.archivo}" contentDisposition="attachment"/>
														</p:commandButton>
														
													</h:form>
													
											<!-- <a href="#" class="btn buy expand" style="padding:0px;"><span class="glyphicon glyphicon-save"></span>  Descargar </a> -->
						
											<!-- <a href="#" class="btn expand paypal" style="padding:0px;"><span class="glyphicon glyphicon-shopping-cart"></span><b><span class="pay">  Pay</span><span class="pal">Pal</span></b></a> -->
						
										        </div>
									        </p:outputPanel>
									        
									        <p:outputPanel rendered="#{loginBean.logueado}">
										        <p:growl rendered="#{versionBean.getPrecioVersion(cd.idContenido) > 0.0}">
											        <form id="pago" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
											            <input type="hidden" name="cmd" value="_xclick"/>
											            <!-- <input type="hidden" name="business" value="openalfa-facilitator@openalfa.com"/> -->
											            <input type="hidden" name="business" value="fabiw89@gmail.com"/>
											            <!-- <input type="hidden" name="item_name" value="Premium Subscription"/> -->
											            <input type="hidden" name="currency_code" value="USD"/>
											            <input type="hidden" name="amount" value="#{versionBean.getPrecioVersion(cd.idContenido)}"/>
<!-- 														<input type="hidden" name="no_shipping" value="1"/>
														<input type="hidden" name="invoice" id="invoice" value="ID-DE-LA-TRANSACCION" />
														<input type="hidden" name="notify_url" id="notify_url" value="http://ejemplo.com/notify.php"/> -->
														<input type="hidden" name="return" value="http://localhost:8080/MarketWEB/market/index.xhtml"/>
														<input type="hidden" name="cancel_return" value="http://localhost:8080/MarketWEB/market/index.xhtml"/>
	<!-- 										            <input type="image" src="https://www.paypal.com/es_XC/i/btn/x-click-but01.gif"
											                   name="submit"
											                   alt="Make payments with PayPal - it's fast, free and secure!"/>
	 -->										        													
														<input type="image" src="#{request.contextPath}/images/logo_paypal.png"
										                   name="submit" class="expand btn-pay" alt="Comprar via Paypal"/>								                   	
								                   	
	 												</form>
										        </p:growl>
									        </p:outputPanel>
										
										
										
										
											<!-- <a href="#" class="btn buy expand" style="padding:0px;"><span class="glyphicon glyphicon-save"></span>  Descargar </a> -->
										</div>
									</div>
								</div>
							</div>
						</div>
						
						<div class="item-menu popout-menu" id="#{cd.nombre}">
							<ul>
								<li>
									<h:form>									
										<p:commandLink styleClass="popout-menu-item" title="Informacion" style="font-size:10px;"
											actionListener="#{versionBean.verInfoVersionContenido(cd.idContenido)}">
											<span class="glyphicon glyphicon-info-sign"></span> Mas...																				
										</p:commandLink>
									</h:form>
								</li>
								<li>
									<h:form>
									
										<h:commandLink styleClass="popout-menu-item" title="Desarrollador"
											actionListener="#{proveedorBean.getInfoProveedor(cd.proveedor.mail)}">
											<span class="glyphicon glyphicon-user"></span> Dev...
										</h:commandLink>
									</h:form>
								</li>
							</ul>
						</div>
						
					</div>
					
				</section>
 
		    </p:dataGrid>
		   	<p:resizable for="dataTable" aspectRatio="true"/>
		   	
		</div>
		
		<script src="#{request.contextPath}/js/item.js"></script>
		
        <script type="text/javascript">  
			function start() { PF('statusDialog').show(); }
			function stop() { PF('statusDialog').hide(); }  
        </script>
        
	</ui:define>
</ui:composition>
